'use strict'
const { View, ScrollView } = window.QUI
import fetch from '../../utils/asyncFetch'
import UserBalance from './useBalance'
import TaskSwiper from './swiper'
import TaskList from './TaskList'
import style from './css.css'
import native from '../../utils/native'
const qbtoken = window.qbtoken

class Index extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      detail: {},
      taskSwiper: [],
      taskrole: [],
      task_award: [],
      userToken: '',
      isLoading: true
    }
  }

  componentDidMount () {
    if (process.env.NODE_ENV === 'development') {
      this._callFunc(qbtoken)
      this._upgrade()
      return false
    }
    if (qbtoken) {
      this._callFunc(qbtoken)
    }
    native.getInfo().then((res) => {
      // console.log(res)
      this.setState({
        userToken: res.Qbtoken
      })
      if (!res.Qbtoken) {
        return false
      }
      const versions = res.system_info.Source
      // console.log(versions)
      const version = versions.substring(versions.indexOf('1'), versions.length).split('.').join('') * 1
      const isIos = versions.indexOf('ios')
      // console.log(isIos)

      if (version < 1140) {
        this._upgrade(isIos)
      }
      // this._callFunc(res.Qbtoken)
    }).catch(() => {
      this._callFunc(qbtoken)
    })
  }
  componentWillUnmount () {
    // clearInterval(this.interval)
  }
  _callFunc = this._callFunc.bind(this)
  _callFunc (qbtoken) {
    this._getTaskDetail(qbtoken)
    this._getTaskCarousel(qbtoken)
    this._getTaskAwardCarousel(qbtoken)
  }

  _upgrade= this._upgrade.bind(this)
  _upgrade (isIos) {
    window.Qapp.showAlert({
      content: '请升级最新版，参与做任务领福利哦～',
      rightButton: {
        event: () => {
          const Gohref = isIos >= 0 ? 'https://itunes.apple.com/app/apple-store/id422853458?pt=519631&mt=8&ct=' : 'https://a.app.qq.com/o/simple.jsp?pkgname=qsbk.app'
          // console.log(Gohref)
          window.location.href = Gohref
        },
        name: '立即下载'
      },
      leftButton: {
        event: native.pop,
        name: '取消'
      }
    })
  }

  async _getTaskDetail (qbtoken) {
    const params = {
      url: '/mission/my/detail',
      qbtoken: qbtoken
    }
    const res = await fetch(params)
    // console.log(res)
    if (res.err === 0) {
      this.setState({
        detail: res,
        isLoading: false
      })
    }
  }

  async _getTaskCarousel (qbtoken) {
    const params = {
      url: '/mission/task_carousel',
      qbtoken: qbtoken
    }
    const res = await fetch(params)
    if (res.err === 0) {
      this.setState({
        taskSwiper: res,
        isLoading: false
      })
    }
  }

  async _getTaskAwardCarousel (qbtoken) {
    const params = {
      url: '/mission/task_award_carousel',
      qbtoken: qbtoken
    }
    const res = await fetch(params)

    if (res.err === 0) {
      this.setState({
        taskrole: res,
        task_award: res.task_award.slice(0, 4),
        isLoading: false
      })
    }
  }

  _renderUserBalance = this._renderUserBalance.bind(this)

  _renderUserBalance () {
    const { detail } = this.state
    const { user } = detail
    if (user) {
      return (<UserBalance user={user} />)
    }
  }

  _renderTaskSwiper = this._renderTaskSwiper.bind(this)

  _renderTaskSwiper () {
    const { taskSwiper } = this.state

    if (taskSwiper.has_carousel) {
      return (<TaskSwiper taskSwiper={taskSwiper.task_carousel} />)
    }
  }

  _renderRoll = this._renderRoll.bind(this)

  _renderRoll () {
    const { taskSwiper } = this.state

    if (taskSwiper.has_carousel) {
      return (
        <View className={style.roleBlock}>
          {this._renderRollItem()}
        </View>
      )
    }
  }

  _renderRollItem = this._renderRollItem.bind(this)

  _renderRollItem () {
    const { taskrole, task_award } = this.state

    const taskAward = taskrole.task_award || []

    const total = taskrole.total
    const flag = 4
    const _this = this
    if (total > 4) {
      console.log(total)
      // this.interval = setInterval(() => {
      //   flag += 4
      //   console.log(flag)
      //   console.log(taskAward.slice(flag, flag+4))
      //
      //   // if (flag >= 8) {
      //   //   clearInterval(this.interval);
      //   //   return
      //   // }
      //   _this.setState({
      //     task_award: taskAward.slice(flag, flag+4)
      //   })
      //   // if (flag >= total) {
      //   //   clearInterval(this.interval);
      //   //   return
      //   // }
      // }, 3000)
    }

    return (
      task_award.map((item, index) => {
        return (
          <View className={style.roleBlockWrap} key='index'>
            <View className={style.textO8}>{item.detail1}</View>
            <View className={style.textO2}>{item.detail2}</View>
            <View className={style.textO}>{item.detail3}</View>
          </View>
        )
      })
    )
  }

  setaward (item) {
    this.setState({
      task_award: item
    })
  }

  _renderTaskList = this._renderTaskList.bind(this)

  _renderTaskList () {
    const { detail } = this.state
    const { task_list = [] } = detail
    return (
      task_list.map((item, index) => {
        return <TaskList task={item} key='index' />
      })
    )
  }
  _renderTaskTitle = this._renderTaskTitle.bind(this)
  _renderTaskTitle () {
    const { detail } = this.state
    if (detail.task_list) {
      return (
        <View className={style.taskList}>
          <View className={style.taskListTitle}>
            <div>日常任务</div>
            <div className={style.textO2}>{dataTip || ''}</div>
          </View>
        </View>
      )
    }
  }

  _renderLoading = this._renderLoading.bind(this)
  _renderLoading () {
    const { isLoading } = this.state
    if (isLoading) {
      return (
        <View className={style.loading}></View>
      )
    }
  }

  render () {
    const { taskSwiper } = this.state
    const scrollStyle = taskSwiper.has_carousel ? style.verticalScrollView1 : style.verticalScrollView
    return (
      <View className={style.container}>
        {this._renderLoading()}
        {this._renderUserBalance()}
        {this._renderTaskSwiper()}
        {this._renderRoll()}
        {this._renderTaskTitle()}
        <ScrollView
          scrollbars={false}
          className={scrollStyle}>
          <View className={style.content}>
            <View className={style.taskList}>
              {this._renderTaskList()}
            </View>
          </View>
        </ScrollView>
      </View>
    )
  }
}
export default Index
